<template>
	<div class="containers">
		<top_bg>
			<template v-slot:title>
				<p>{{title}}</p>
			</template>
		</top_bg>


		<prize_area_item v-for="(item,index) in items" :key="item.id"  @click="toGoods(item)">
			<template v-slot:prize_area_item_state>
				<div class="status">
					<!-- <img :src="stateSource" alt="status_img" class="status_img"> -->
					<!-- <slot name="state"></slot> -->
					<!-- <img src="../../assets/join_draw.png"  class="status_img"> -->
					<img style="max-width:60%;" src="../../assets/wait_draw.png"  class="status_img" v-if="item.q_uid != null">
					<img style="max-height:80%" src="../../assets/join_draw.png"  class="status_img" v-if="item.q_uid == null">
					<!-- <img v-show="item.q_uid != null" src="../../assets/join_draw.png"  class="status_img"> -->
					<!-- <p>{{state}}</p> -->
					<p class="status_text" v-if="item.q_uid != null" >Already participated</p>
					<p class="status_text" v-if="item.q_uid == null" >Join draw</p>
				</div>
			</template>

			<template v-slot:prize_area_item_img>
				<img :src=uploads_url+item.thumb class="prize_area_item_img" />

			</template>

			<template v-slot:prize_area_item_desc>
				<p class="prize_area_item_desc_text1">Get a chance to</p>
				<p class="prize_area_item_desc_text2">WIN</p>
				<p class="prize_area_item_desc_text3">{{item.title.length > 18 ? item.title.substr(0,18)+"...":item.title}} </p>	
				<van-progress color="#F4BE41" :percentage="((item.canyurenshu)/item.zongrenshu).toFixed(2)*100" stroke-width="20" :showPivot="(item.canyurenshu)/item.zongrenshu !== 0" class="vanprogress" />
				<p class="prize_area_item_desc_text4">{{item.canyurenshu}}/{{item.zongrenshu}} sold</p>
				<p class="prize_area_item_desc_text5">Draw Date:{{convertTime(item.time)}} or earlier if
					the campaign is sold out.</p>
			</template>

		</prize_area_item>
		<!-- 
		<prize_area_item imgName="purchase_prize_goods1.png"   @click="toGoods">
			<template v-slot:state>
				<p>{{state}}</p>
			</template>
		</prize_area_item> -->

		<!-- 		<div class="status2">
			<img src="../../assets/wait_draw.png" alt="status2_img" class="status2_img">
			<p class="status2_text">Wait for the draw </p>
		</div> -->
		<!-- 		<prize_area_item imgName="purchase_prize_goods1.png"  @click="toGoods">
			<template v-slot:state>
				<p>{{state}}</p>
			</template>
		</prize_area_item> -->

		<!-- 底部导航 -->
		<footer_nav />
	</div>
</template>

<script>
	import prize_area_item from "../../components/prize_area_item.vue"
	import globalData from "@/main.js"
	import {setCookie,convertUnixToDate} from "../../util.js"
	import { showToast } from "vant"
	
	export default {
		data() {
			return {
				title: "Botim Prize Area",
				state: 0,
				items: {},
				uploads_url: '',
				stateName:"",
			}
		},
		computed: {
			stateSource() {
				return require('@/assets/' + this.stateName);
			},
		},
		components: {
			prize_area_item,
		},
		mounted() {
			console.log("===prize_area mounted===")
			this.uploads_url = globalData['uploads_url']
			this.getPrizeArea()
		},
		methods: {
			toGoods(item) {
				// console.log("xxxxxxxxxxxxxxx")
				// console.log("xxxxxxxxxxxitemxxxx",item)
				if(item.q_uid != null) {
					showToast('Already participated')
					return;
				}
				
				// router-link to="/goods"
				// this.$router.push('/goods')
				console.log("---toGoods  item:---",item)
				var contents =  JSON.stringify(item);
				// console.log("---toGoods---",this.goods_url+item.id)
				// this.$router.push('/goods')
				this.$router.push({
					name:'goods',
					params:{
						context:contents,
					}
				})
				
			},
			getPrizeArea: function() {
				var that = this
				console.log("---getPrizeArea start ---")
				console.log("---mobile_url:" + globalData['mobile_url']+'mobile/')
				this.axios({
					method: "GET", // method:"post" data:{"firstName":"Tom","lastName":"Sun"} //get params:{id:123}
					url: globalData['mobile_url']+'mobile/'
				}).then(function(response) {
					console.log("response:", response)
					console.log("response data:", response.data) //JSON.stringify(data)
					// console.log("response to json:", JSON.stringify(response))
					//var contents = JSON.parse(response.data)	
					console.log(typeof response.data)
					if(response.data.length >= 3) {
						that.items = response.data[3]
					}
					
					console.log("---getPrizeArea response.data.length---:" + response.data.length)
					// for (var i = 0; i < response.data.length; i++) {
					// 	console.log("one item data:", response.data[i])
					// }
				}).catch(function(error) { // 请求失败处理
					console.log("---error start---");
					console.log(error);
					console.log("---error end---");
				});
			},
			convertTime:function(timeStamp) {
				return convertUnixToDate(timeStamp)
			},
		}
	}
</script>

<style scoped>
	.containers {
		display: flex;
		flex-direction: row;/* 设置主轴方向为行 */
		flex-wrap: wrap;/* 允许flex容器换行 */
		justify-content: space-between; /* 均匀分布在容器中 */
/* 		justify-content:space-around; */
		/* align-items:center; */
		/* justify-content : center; */
		/* align-items:center; */
	}
	
	.prize_area_item_img {
		width: 11rem;
		height: 9rem;
		/* height: auto; */
		/* object-fit: cover; */
		/* margin-top: 0.2rem; */
		/* 保持宽高比例并填充整个容器 */
		
	}


	.prize_area_item_desc_text1 {
		position: relative;
		font-size: 1rem;
		font-family: 'PingFang SC';
		/* text-align: left; */
		left: 0.5rem;
		/* 		background: linear-gradient(to right, #FE1B2E, #FF2291);
			-webkit-background-clip: text;
			color: transparent;
			position: relative;
			text-align: center;
			top: 80%; */
	}

	.prize_area_item_desc_text2 {
		position: relative;
		top: -2.4rem;
		left: 8.3em;
		color: rgb(247, 72, 43);
		font-size: 1rem;
		font-weight: bold;
		font-family:"'PingFang SC'Bold";
		line-height: 1.5rem;

	}

	.prize_area_item_desc_text3 {
		line-height: 1.5rem;
		position: relative;
		top: -3rem;
		font-family: 'PingFang SC';
		font-weight: bolder;
		font-size: 0.8rem;
		left: 0.5rem;
	}

	.vanprogress {
		position: relative;
		top: -3rem;
		left: 0.5rem;
		width: 10rem;
	}

	.prize_area_item_desc_text4 {
		position: relative;
		font-family: 'PingFang SC';
		color: #747474;
		left: 0.5rem;
		top: -3rem;
		font-weight: bold;
		font-size: 0.8rem;

	}

	.prize_area_item_desc_text5 {
		position: relative;
		font-family: 'PingFang SC';
		color: #8C8C8C;
		left: 0.5rem;
		top: -3.5rem;
		font-size: 0.8rem;
	}

	.status {
		background-color: #F4C8BF;
	/* 	height: 2rem;*/
		width: 10rem; 
		top: -10rem;
		left: -3rem;
		border-radius:25px 0  25px 0;
	}

	.status_img {
		position: relative;
		/* top: 0.5rem; */
/* 		width: 2rem;
		height: 1.5rem; */
		margin-top: 0.5rem;
	}

	.status_text {
		position: relative;
		color: #683C33;
	/* 	top: -3.5rem; */
		/* left: 1rem; */
		/* top: 0.5rem; */
		/* background-color: blue; */
		font-family: 'PingFang SC';
		font-size: 0.8rem;
		font-weight: bold;

	}
	.van-toast__text {
	  font-size: 1.5rem;
	}
	.van-toast {
	  width: 80vw; /* 自定义宽度 */
	   height:10vh;
	}
</style>